@charset "utf-8";
/* CSS Document */
* {
font-weight: bold;
text-align: center;
}
@font-face {font-family: 'Canela';
src: url("Fonts/CanelaText-Medium-Trial.otf") format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {font-family: 'Sansation';
src: url("Fonts/Sansation-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'OpenSans';
    src: url('Fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@keyframes flyIn {
  0% {
    transform: translate(-100%, -100%);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
	/*moves it 30% of the width and 50% of the height of the element!*/
  100% {
    transform: translate(30%, 120%);
    opacity: 1;
  }
	/*or number of pixels!
  100% {
    transform: translate(100px, 250px);
    opacity: 1;
  }
	*/
	
}

/* Apply the animation to the message element */
#Discount {
  position: absolute;
  
  animation: flyIn 3s ease-in-out 1s forwards ; /* Duration: 3s, Delay: 1s */
  opacity: 0; /* Start with opacity 0 for the initial state */
	color: #DB8D07;
		background: #080705; 
	font-weight: bolder;
	font-size: 16px;
	font-style: normal;;
      padding: 20px;
      border: 2px solid #F0D96F;
		border-radius: 10px;
      width: 300px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 50px auto;
	
}

body {background-image: url("../images/leather.jpg")}
.login a {width: 100px; height:auto;
	background-color: #5F7C8E
}
.fbook img {
	float: right;
	border: thick solid #faf0E6;
	border-radius: 5px;
	background-color: #FAF0E6;
	margin: 10px;
}
#conemail, #conname {width: 80%; border-radius: 10px}
.contactus {width: 90%; display: flex; justify-content: center; font-family: 'Sansation';}
.titler {background-color:#692516; color:  #faf0E6; font-family: 'Sansation'; font-size: 24px; font-weight: bold}
.emailcontainer { color: #A67B7C; font-family: 'OpenSans'; width: 60%; align-content: center; border: solid; border-color: #692516}
#message {width: 90%; }
.LHRMF {width: 37%; 
height: auto; float: left}
.Galleryvideo {width: 100%; height: auto}
.Galleryvideo img {width: 480px}
.mission {font-family: "Canela"; font-size: 20px;
font-style: italic; font-weight: bold; color:#5F7C8E }
.ytube img {
float:right;
	width: 100px;
	background-color: #FAF0E6;
	border-radius: 5px;
	margin: 10px;
	padding: 5px
}
/* hex codes for color scheme
linen #faf0E6
burgundy #692516
black #080705
gold orange #DB8D07
blue grey #5F7C8E*/
.goldleft {float: left;
height: 182px;
width: 30px}
/* This is the sub menu*/
ul {list-style: none;
margin: 0;
padding: 0
}
.footer a {color:#faf0E6}
p, h1 {font-size: 25px}
/* leave out the , to create hierachial order */
ul li {display: inline-block;
position: relative;
font-size: 25px}
ul li a {display: block;
padding: 10px 20px;
text-decoration: none;
	color:#080705
}

#formbutton {
  display: block;
  position: relative;
  z-index: 1;
}

ul li ul {display: none;
position: absolute;
background-color: #fff;
z-index: 2;
	opacity: 1}
ul li:hover ul {display: block;}
ul li ul li {display: block;
	
white-space: nowrap}
ul li ul li a {
	display: block;
	padding: 10px 20px;
	color: #080705;
	transition: background-color 0.3s;
	}
#Menu a:hover{background-color: #692516}

/*end of submenu*/
/*#buttontext {opacity: 0}*/
.Outer {width: 100%
}
#buttontext {font-size: 14px; 
color: #692516;
background-color:#692516 }
.logo img {float: left; width: 210px; height: auto}
.goldleft img {height: 183px}
.Banner {height: 182px;
background-color: #080705;
color: #DB8D07;
padding: 10px}
.Banner, .Banner p, .Banner h1 {
	font-size: 50px;
	background-color: #080705;
/*background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(8,7,5,1.00) 100%);
	background-image: -moz-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(8,7,5,1.00) 100%);
	background-image: -o-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(8,7,5,1.00) 100%);
	background-image: linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(8,7,5,1.00) 100%);*/
}
.Banner p {
	text-shadow: 1px 0px #080700;
}
.social {float: right;
}
.LHNews {width: 100%; padding: 10px;
	text-align: justify;
	height: 600px;
	overflow: scroll}
#Menu {
	background-color: #5F7C8E;
		
}
#Menu a {
	font-family: "Sansation"; 
	background-color:#5F7C8E; 
	color: #faf0E6;
font-size: 18px}
.LH, .LHlibrary {color:#692516;
	width:37%;
	height: 600px;
	padding: 5px ;
/*border: solid;*/
background-image: url("../images/leather.jpg")}
.RHA, .RH2 {color:#692516;
	width:58%;
	height: 250px;
background-image: url("../images/leather.jpg")
	
	}
.RHRMF {color:#692516;
	width:58%;
	height: auto;
background-image: url("../images/leather.jpg");float: left
	
	}
/* column and container setup */
	.column  {font-family: "OpenSans";width: 29%;display: block;margin-left: 1.5%; margin-bottom: 10px; float:left;
	color: #692516;
	font-weight: bolder;
			font-size: 20px;
}
#Table1 {
  display: flex;
  justify-content: center;
  align-items: center;
	

}
.RHRMF #Table1 {width: 97%}
.RHA img {max-width: 700px; height: auto}
.column a {
	color: #692516;
	font-family: "OpenSans";
	font-weight: bolder;
	font-size: 20px;
	font-style: normal;
	text-decoration: none;
}
#subscribe:hover {background-color: #88D94E}
.container, #form1, #name, #email, #Delivery  {
	
		border-radius: 5px;
		
	font-family: "OpenSans";
}

#subscribe {position:relative}
.column {
	
	box-sizing: border-box;
	border: 2px solid #F0D96F;
	
	
	border-radius: 10px;
	position: relative
}
.RHA img {margin: 5px}
.LH img {margin: 5px}
.LH a {
	color: #692516;
	text-decoration: none;
}
.LH a:hover {
	color:crimson;}
#form1 {margin: 0 auto;
}


.column {background: #faf0E6;
	
	align-content: center;
}

#name, #email, #Delivery {width: 100%}
#form1 {
	width: 800px;
	align-content: center;
	
}

#formbutton {
  display: inline-block;
  background-color: #fff; /* Ensure the button has a visible background color */
  color: #000; /* Ensure the text color is visible */
  padding: 10px 20px; /* Add some padding to make it more noticeable */
  border: 2px solid #000; /* Add a border to make it stand out */
  cursor: pointer; /* Change the cursor to a pointer when hovering */
  z-index: 10; /* Increase the z-index to ensure it's on top */
}
.column {font-family: "OpenSans"}
.Outer a {background-color: #DB8D07;
	text-decoration: none; color: #692516; border-radius: 5px}
.Outer a:hover{background-color: gold}
.RHA a, .RHRMF a {background-color: #DB8D07;
	text-decoration: none; color: #692516; border-radius: 5px}
.RHA a:hover{background-color: gold}
.RHRMF a:hover{background-color: gold}
.RH2 a {background-color: #DB8D07;text-decoration: none;
color: #692516; border-radius: 5px}
.RH2 a:hover{background-color: gold}
.mission a {background-color: #DB8D07;text-decoration: none;
color: #692516; border-radius: 5px}
.mission a:hover{background-color: gold}

.RHA, .RHRMF, .RH2, .LH, .LHlibrary {font-family: "Opensans"; float:left;
	text-align: justify;
	padding-right: 10px;
	padding-left: 10px
}
.LH, .RHA, .RH2, .LHlibrary {overflow: scroll}
.RH2, .RHA {color:#692516;
	width:58%;
	height: 300px;
	
/*border: solid;*/
}
/*FLOAT LEFT - REALLY USEFUL!*/
.RH2, .LH2, .footer {float:left;
}
.footer, .Navigation {width: 100%;
	color: #faf0E6;
background-color: #692516
}
h2 {font-family: "Sansation"; 
color: #692516;
font-size: 18px}
.footer {margin-top: 10px}
h1 {font-family: "Canela"}
#Menutoggle input {
	position: absolute;
	width: 40px;
	cursor: pointer;
	opacity: 0;
	z-index: 2; /*in order to place the checkbox over the hamburger*/
	-webkit-touch-callout: none;
	
}
#Table1 input {
	position: absolute;
	width: 60px;
	cursor: pointer
		}
@media (max-width: 850px){
	.contactus {width: 95%; display: flex; justify-content: center}
.title {background-color:#A67B7C; color:  #faf0E6; font-family: 'Sansation'; font-size: 15px; font-weight: bold}
.emailcontainer { color: #A67B7C; font-family: 'OpenSans'; width: 95%; align-content: center; border: solid; border-color: #A67B7C}
	
	.RHRMF, .LHRMF {width: 95%; padding: 0px; margin: 0px; font-size: 12px}
	/*.Galleryvideo, .LHRMF {display: none}*/
	.RHA, .LH, .RH2, .LH2, .column {width:100%; height: auto; overflow: auto; padding: 0px; margin-left: 0px; margin-right: 0px
}.Outer img {width: 100%; align-content: center}
	.RHA img, .mission img {width: 100%; height: auto}
	.LHlibrary {opacity: 0}
	.logo img {float: left; width: 130px; height: auto}
	.goldleft img {float: left;
height: 115px;
width: 30px}
	.ytube img {width: 80px;
	height: auto}
	.fbook img {width: 40px;
	height: auto}
	.login a {width: 80px; height:auto}
	.Banner {height: 180px;}
	.Banner p, .Banner h1 {font-size: 40px;
	text-align: center}
	video {width: 350px;
	height: auto}
	#buttontext {font-size: 14px; 
background-color: #080705;
 color: #DB8D07; }
	/*MENUTOGGLE Hamburger menu controls */
#Menutoggle {position: relative;
z-index:1;}
#Menutoggle input {left:1px; 
width:30px;
	height:30px;
cursor:pointer;
	opacity:0;
	z-index:2; /*in order to place the checkbox over the hamburger*/
	-webkit-touch-callout:none;
}
#Menutoggle span {display:block; /*to ensure that each span element occupies its own line*/
width:33px;
height: 4px;
margin-bottom: 5px;/* create some space bnetween span eelments*/
	position: relative;/*allow for posiiton changes relative to the parent div*/
	background:#cdcdcd;
	border-radius: 3px;
	z-index:1; /*ensure that the span element s under the checkbox*/
	transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1), background 0.5s cubic-bezier(0.770.2,0.05,1), opacity 0.55s ease;
	transform-origin: 4px 0px; /* sets the centre for rotation of the transform property*/
	
}
#buttontext {text-align:left;
opacity:1;color: #faf0E6;
	font-size:16px;
	}
#Menutoggle span:first-child {transform-origin: 0% 0%; }

#Menutoggle input:checked-span {opacity:1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}

	#Discount {
  position: absolute;
  
  animation: flyIn 3s ease-in-out 1s forwards; /* Duration: 3s, Delay: 1s */
  opacity: 0; /* Start with opacity 0 for the initial state */
	color:#080705 ;
		background:#faf0E6; 
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 12px;
	font-style: normal;;
      padding: 20px;
      border: 2px solid #F0D96F;
		border-radius: 10px;
      width: 250px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 50px auto;
		
}
.hidden { display: none }

#Menu {position:absolute;
	display: block;
	align-content: center;
left:-300px;
top:80px;
width: 200px;
margin:-100px 0 0 -50px;
padding:50px;
padding-top: 50px;
background:#5F7C8E;
	font-size: 10px;
}

#Menu li {
	padding: 10px 0;
	font-size: 16px;
	display:block;
	/*border-radius: 10px;*/
	background:#5F7C8E;
}
#Menutoggle input:checked ~ ul {left:30px;
	}
	/* move the submenu to the right*/
	#Menutoggle input:checked ~ ul li ul {left: 150px}
	/* container settings */
h1,.container, #form1, #name, #email, #Delivery {
        flex-direction: column;
		width:100%
   }
   }
@media (max-width: 575px){
	.RHA, .LH, .RH2, .LH2, .Outer {width:100%; height: auto; overflow: auto; padding: 0px; margin-left: 0px; margin-right: 0px
}
	.RHRMF, .LHRMF {width: 95%; padding: 0px; margin: 0px; font-size: 12px}
	/*.Galleryvideo, .LHRMF {display: none}*/
	.LHlibrary {display: none}
	.mission {font-size: 14px; width:  100%; color:#080705 }
	.RHA, .RH2 {font-size: 12px}
	.LH img {width: 100%; align-content: center}
	.Outer img {width: 100%; align-content: center}
	.Outer a {width: 100%; align-content: center}
	.RHA img {width: 100%; align-content: center}
	.RH2 img {width: 100%; height: auto; align-content: center}
	.logo img {float: left; width: 130px; height: auto}
	.goldleft img {float: left;
height: 115px;
width: 30px}
	.ytube img {width: 50px;
	height: auto}
	.login img  {width: 60px; height: auto
}
	.fbook img {width: 20px;
	height: auto}
	.Banner {vertical-align: middle; height: 290px; 
		background-color:#080705;
	background-image:url();}
	.title {float: left;
		background-color:#080705;
	text-align: center; height: 40px}
	.Banner p, .Banner h1 {background-color:#080705; 
		background-image:url();
		horizontal-align: middle; 
		font-size: 35px;
	text-align: center}
	#buttontext {background-color: #692516}
	#Menu {width: 150px}
}